<template>
  <div class="m-views-selectPurchase">
    <!-- <el-row :gutter="20">
             <el-col :span="4">
            <el-input placeholder="客户"></el-input>
             </el-col>
             <el-col :span="4">
            <el-input placeholder="采购订单号"></el-input>
             </el-col>
              <el-col :span="4">
                  <label for="bill_data_from">订单日期</label>
            <el-input name="bill_data_from" placeholder="订单日期"></el-input>
             </el-col>
        </el-row> -->

    <div>
      <el-form
        :model="searchOption"
        ref="ruleForm"
        label-width="90px"
        :inline-message="true"
        label-position="left"
      >
        <el-row :gutter="5" class="searchRow">
          <el-col :span="8">
            <el-form-item label="采购订单号" prop="purOrdNo" class="rightItem">
              <el-input v-model="searchOption.purOrdNo"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="订单日期" prop="startDate" class="rightItem">
              <el-date-picker
                v-model="searchOption.startDate"
                type="date"
                placeholder="订单日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="~"
              prop="endDate"
              class="rightItem"
              label-width="20px"
            >
              <el-date-picker
                v-model="searchOption.endDate"
                type="date"
                placeholder="订单日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" class="searchRow">
          <el-col :span="8">
            <el-form-item label="公司" prop="companyCode" class="rightItem">
              <el-select
                v-model="searchOption.companyCode"
                placeholder="请选择客户"
                clearable
              >
                <el-option
                  v-for="option in companyList"
                  :key="option.companyCode"
                  :value="option.companyCode"
                  :label="option.companyName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="userType != 4">
            <el-form-item label="供应商" prop="supplier" class="rightItem">
              <el-input v-model="searchOption.supplier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="userType != 4 ? 0 : 8">
            <el-button class="searchButton" @click="searchData" type="primary"
              >查询</el-button
            >
          </el-col>
          <el-col :span="4">
            <el-button class="searchButton" @click="summit" type="primary"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="height:500px" class="outsideDiv">
      <div style="height:100%">
        <ag-grid-vue
          class="m-agTableContent ag-theme-balham"
          :gridOptions="gridOptions"
          :columnDefs="columnDefs"
          v-loading="loading"
          :rowData="rowData"
          style="width:100%;"
          ref="agGridPurchaseComponent"
          rowSelection="multiple"
        ></ag-grid-vue>
      </div>
    </div>
  </div>
</template>
<script>
import _Api from "@/api";
import authInfo from "@/public/authInfo.js";
import localeText from "@/i18n/agGridText";
export default {
  data() {
    return {
      // 用户类型,4为供应商，1为内部用户
      userType: this.$global.user.userTypeId,
      companyList: [],
      loading: false,
      searchOption: {
        companyCode: "",
        supplierCode: this.$global.supplierData.supplierCode,
        startDate: "",
        endDate: "",
        purOrdNo: "",
        current: 1,
        size: 30
      },
      gridOptions: {},
      columnDefs: [],
      rowData: []
    };
  },
  props: {
    getSelectPurchase: {
      type: Function
    }
  },
  beforeMount() {
    this.gridOptions = {
      context: {
        componentParent: this
      },
      localeText: localeText,
      suppressRowClickSelection: true,
      enableColResize: true,
      // getContextMenuItems:this.getContextMenuItems,
      onGridReady: function($event) {
        // that.gridOptions.api.sizeColumnsToFit();
      }
    };
    //     purOrdNo	string	采购订单号
    // purOrdDate	Date	订单日期
    // matCode	string	物料号
    // matName	string	物料描述
    // orderAmount	BigDecimal	订单数量
    // unitCode	string	单位
    // priceAmount	BigDecimal	价格数量
    // priceUnit	String	价格单位
    // planableAmount	BigDecimal	可计划数量
    this.columnDefs = [
      {
        headerName: "采购订单号",
        field: "purOrdNo",
        width: 170,
        checkboxSelection: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        suppressSizeToFit: true
      },
      {
        headerName: "订单日期",
        field: "purOrdDate",
        width: 150,
        suppressSizeToFit: true
      },
      { headerName: "物料描述", field: "matName", width: 320 },
      { headerName: "订单数量", field: "orderAmount", width: 120 },
      { headerName: "单位", field: "unitCode" },
      { headerName: "可计划数量", field: "planableAmount" }
    ];

    let that = this;
    // 获取公司信息
    authInfo.getAuthInfo().then(authCompanyInfo => {
      that.companyList = authCompanyInfo;
    });
  },
  mounted() {
    this.$refs["agGridPurchaseComponent"].gridOptions.api.hidePopupMenu();
    this.searchData();
  },
  methods: {
    searchData() {
      this.loading = true;
      let option = JSON.parse(JSON.stringify(this.searchOption));
      if (option.startDate) {
        option.startDate = new Date(option.startDate).Format(
          "yyyy-M-d 00:00:00"
        );
      }
      if (option.endDate) {
        option.endDate = new Date(option.endDate).Format("yyyy-M-d 00:00:00");
      }
      _Api.selectPurchaseList(option).then(res => {
        this.loading = false;
        if (res.data.code == 1) {
          this.rowData = res.data.rows;
          this.$refs[
            "agGridPurchaseComponent"
          ].gridOptions.api.sizeColumnsToFit();
        }
      });
    },
    summit() {
      let rows = this.gridOptions.api.getSelectedRows();
      this.getSelectPurchase(rows);
    }
  }
};
</script>

<style lang="less">
.m-views-selectPurchase {
  .searchRow {
    margin-bottom: 10px;
  }
  .outsideDiv {
    padding-bottom: 10px;
  }
}
</style>
